{% extends 'adminuser/base_admin.html' %}

{% block admin_title %}评论管理{% endblock %}

{% block admin_content %}
<div class="d-flex justify-content-between mb-3">
    <h5>评论总数: {{ total_comments }}</h5>
    <div>
        <form class="d-flex" method="get">
            <div class="input-group me-2">
                <input type="text" name="search" class="form-control" placeholder="搜索评论内容..." value="{{ search_query }}">
                <button type="submit" class="btn btn-outline-primary">
                    <i class="bi bi-search"></i>
                </button>
            </div>
            <select name="status" class="form-select" onchange="this.form.submit()">
                <option value="" {% if selected_status == '' %}selected{% endif %}>全部状态</option>
                <option value="pending" {% if selected_status == 'pending' %}selected{% endif %}>待审核</option>
                <option value="approved" {% if selected_status == 'approved' %}selected{% endif %}>已批准</option>
                <option value="rejected" {% if selected_status == 'rejected' %}selected{% endif %}>已拒绝</option>
            </select>
        </form>
    </div>
</div>

<form id="batch-action-form" method="post" action="{% url 'adminuser:batch_handle_comments' %}">
    {% csrf_token %}
    <div class="mb-3">
        <div class="btn-group">
            <button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                批量操作
            </button>
            <ul class="dropdown-menu">
                <li><button type="submit" name="action" value="approve" class="dropdown-item">批准选中评论</button></li>
                <li><button type="button" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#batchRejectModal">拒绝选中评论</button></li>
                <li><button type="button" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#batchDeleteModal">删除选中评论</button></li>
            </ul>
        </div>
        <div class="btn-group ms-2">
            <button type="button" class="btn btn-outline-secondary" id="select-all-btn">全选</button>
            <button type="button" class="btn btn-outline-secondary" id="select-pending-btn">全选待审核</button>
            <button type="button" class="btn btn-outline-secondary" id="select-approved-btn">全选已批准</button>
            <button type="button" class="btn btn-outline-secondary" id="select-rejected-btn">全选已拒绝</button>
            <button type="button" class="btn btn-outline-secondary" id="deselect-all-btn">取消全选</button>
        </div>
    </div>

    <div class="card">
        <div class="card-header bg-light">
            <div class="row">
                <div class="col-md-1">选择</div>
                <div class="col-md-3">评论内容</div>
                <div class="col-md-2">作者 / 故事</div>
                <div class="col-md-2">时间</div>
                <div class="col-md-2">状态</div>
                <div class="col-md-2">操作</div>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="list-group list-group-flush">
                {% for comment in page_obj %}
                <div class="list-group-item">
                    <div class="row align-items-center">
                        <div class="col-md-1">
                            <div class="form-check">
                                <input class="form-check-input comment-checkbox" type="checkbox" name="comment_ids" value="{{ comment.id }}" id="comment-{{ comment.id }}" data-status="{{ comment.status }}">
                                <label class="form-check-label" for="comment-{{ comment.id }}"></label>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <p class="mb-1 text-truncate">{{ comment.content|truncatechars:100 }}</p>
                            {% if comment.parent_comment %}
                            <small class="text-muted">
                                回复评论: {{ comment.parent_comment.content|truncatechars:50 }}
                            </small>
                            {% endif %}
                        </div>
                        <div class="col-md-2">
                            <div>
                                <a href="{% url 'adminuser:user_detail' user_id=comment.user.id %}">
                                    {{ comment.user.username }}
                                </a>
                            </div>
                            <small class="text-muted">
                                <a href="{% url 'story:detail' pk=comment.story.id %}">{{ comment.story.title|truncatechars:20 }}</a>
                            </small>
                        </div>
                        <div class="col-md-2">
                            {{ comment.created_at|date:"Y-m-d H:i" }}
                        </div>
                        <div class="col-md-2">
                            {% if comment.status == 'pending' %}
                            <span class="badge bg-warning">待审核</span>
                            {% elif comment.status == 'approved' %}
                            <span class="badge bg-success">已批准</span>
                            {% elif comment.status == 'rejected' %}
                            <span class="badge bg-danger">已拒绝</span>
                            {% endif %}
                        </div>
                        <div class="col-md-2">
                            <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#viewCommentModal{{ comment.id }}">
                                <i class="bi bi-eye"></i> 查看
                            </button>
                            {% if comment.status == 'pending' %}
                            <div class="btn-group mt-1">
                                <button type="button" class="btn btn-sm btn-success" data-bs-toggle="modal" data-bs-target="#approveCommentModal{{ comment.id }}">
                                    <i class="bi bi-check"></i> 批准
                                </button>
                                <button type="button" class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#rejectCommentModal{{ comment.id }}">
                                    <i class="bi bi-x"></i> 拒绝
                                </button>
                            </div>
                            {% endif %}
                            <button type="button" class="btn btn-sm btn-outline-danger mt-1" data-bs-toggle="modal" data-bs-target="#deleteCommentModal{{ comment.id }}">
                                <i class="bi bi-trash"></i> 删除
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 查看评论模态框 -->
                <div class="modal fade" id="viewCommentModal{{ comment.id }}" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">查看评论</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <div class="mb-3">
                                    <label class="form-label fw-bold">评论内容</label>
                                    <div class="p-3 bg-light rounded">{{ comment.content }}</div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-bold">评论者</label>
                                    <div>{{ comment.user.username }}</div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-bold">故事</label>
                                    <div>{{ comment.story.title }}</div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-bold">创建时间</label>
                                    <div>{{ comment.created_at|date:"Y-m-d H:i:s" }}</div>
                                </div>
                                {% if comment.parent_comment %}
                                <div class="mb-3">
                                    <label class="form-label fw-bold">回复评论</label>
                                    <div class="p-3 bg-light rounded">{{ comment.parent_comment.content }}</div>
                                </div>
                                {% endif %}
                                {% if comment.status == 'rejected' and comment.rejected_reason %}
                                <div class="mb-3">
                                    <label class="form-label fw-bold">拒绝原因</label>
                                    <div class="p-3 bg-light rounded">{{ comment.rejected_reason }}</div>
                                </div>
                                {% endif %}
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 批准评论模态框 -->
                <div class="modal fade" id="approveCommentModal{{ comment.id }}" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">确认批准评论</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <p>您确定要批准此评论吗？批准后，评论将对所有用户可见。</p>
                                <div class="p-3 bg-light rounded">{{ comment.content }}</div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                <form action="{% url 'adminuser:handle_comment' comment_id=comment.id %}" method="post">
                                    {% csrf_token %}
                                    <input type="hidden" name="action" value="approve">
                                    <button type="submit" class="btn btn-success">确认批准</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 拒绝评论模态框 -->
                <div class="modal fade" id="rejectCommentModal{{ comment.id }}" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">拒绝评论</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <form action="{% url 'adminuser:handle_comment' comment_id=comment.id %}" method="post">
                                {% csrf_token %}
                                <input type="hidden" name="action" value="reject">
                                <div class="modal-body">
                                    <div class="mb-3">
                                        <label class="form-label">评论内容</label>
                                        <div class="p-3 bg-light rounded">{{ comment.content }}</div>
                                    </div>
                                    <div class="mb-3">
                                        <label for="rejected_reason" class="form-label">拒绝原因</label>
                                        <textarea class="form-control" id="rejected_reason" name="rejected_reason" rows="3" required></textarea>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                    <button type="submit" class="btn btn-danger">确认拒绝</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                
                <!-- 删除评论模态框 -->
                <div class="modal fade" id="deleteCommentModal{{ comment.id }}" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">确认删除</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <p>您确定要删除此评论吗？该操作不可撤销。</p>
                                <div class="p-3 bg-light rounded">{{ comment.content }}</div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                <form action="{% url 'adminuser:handle_comment' comment_id=comment.id %}" method="post">
                                    {% csrf_token %}
                                    <input type="hidden" name="action" value="delete">
                                    <button type="submit" class="btn btn-danger">确认删除</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                {% empty %}
                <div class="list-group-item text-center">
                    <p class="text-muted my-3">没有找到符合条件的评论</p>
                </div>
                {% endfor %}
            </div>
        </div>
        <div class="card-footer">
            <nav>
                <ul class="pagination justify-content-center mb-0">
                    {% if page_obj.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page=1{% if search_query %}&search={{ search_query }}{% endif %}{% if selected_status %}&status={{ selected_status }}{% endif %}">首页</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if selected_status %}&status={{ selected_status }}{% endif %}">上一页</a>
                    </li>
                    {% else %}
                    <li class="page-item disabled">
                        <a class="page-link" href="#">首页</a>
                    </li>
                    <li class="page-item disabled">
                        <a class="page-link" href="#">上一页</a>
                    </li>
                    {% endif %}
                    
                    <li class="page-item active">
                        <span class="page-link">{{ page_obj.number }} / {{ page_obj.paginator.num_pages }}</span>
                    </li>
                    
                    {% if page_obj.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if selected_status %}&status={{ selected_status }}{% endif %}">下一页</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if search_query %}&search={{ search_query }}{% endif %}{% if selected_status %}&status={{ selected_status }}{% endif %}">末页</a>
                    </li>
                    {% else %}
                    <li class="page-item disabled">
                        <a class="page-link" href="#">下一页</a>
                    </li>
                    <li class="page-item disabled">
                        <a class="page-link" href="#">末页</a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
        </div>
    </div>
    
    <!-- 批量拒绝评论模态框 -->
    <div class="modal fade" id="batchRejectModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">批量拒绝评论</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="batch_rejected_reason" class="form-label">拒绝原因</label>
                        <textarea class="form-control" id="batch_rejected_reason" rows="3" required></textarea>
                        <div class="invalid-feedback">
                            请提供拒绝原因
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="batch-reject-submit">确认拒绝</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 批量删除评论模态框 -->
    <div class="modal fade" id="batchDeleteModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">批量删除评论</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>您确定要删除选中的评论吗？该操作不可撤销。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" name="action" value="delete" class="btn btn-danger">确认删除</button>
                </div>
            </div>
        </div>
    </div>
</form>

<!-- 隐藏字段：用于批量拒绝时提交拒绝原因 -->
<input type="hidden" id="hidden_rejected_reason" name="rejected_reason" form="batch-action-form">

<div class="row mt-3">
    <div class="col-md-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">评论统计</h5>
                <div class="d-flex justify-content-between align-items-center">
                    <div>总评论数</div>
                    <span class="badge bg-primary">{{ total_comments }}</span>
                </div>
                <div class="d-flex justify-content-between align-items-center mt-2">
                    <div>待审核</div>
                    <span class="badge bg-warning">{{ pending_comments }}</span>
                </div>
                <div class="d-flex justify-content-between align-items-center mt-2">
                    <div>已批准</div>
                    <span class="badge bg-success">{{ approved_comments }}</span>
                </div>
                <div class="d-flex justify-content-between align-items-center mt-2">
                    <div>已拒绝</div>
                    <span class="badge bg-danger">{{ rejected_comments }}</span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 添加JavaScript代码 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 全选按钮
    document.getElementById('select-all-btn').addEventListener('click', function() {
        const checkboxes = document.querySelectorAll('.comment-checkbox');
        checkboxes.forEach(checkbox => {
            checkbox.checked = true;
        });
    });
    
    // 全选待审核按钮
    document.getElementById('select-pending-btn').addEventListener('click', function() {
        const checkboxes = document.querySelectorAll('.comment-checkbox');
        checkboxes.forEach(checkbox => {
            if (checkbox.getAttribute('data-status') === 'pending') {
                checkbox.checked = true;
            } else {
                checkbox.checked = false;
            }
        });
    });
    
    // 全选已批准按钮
    document.getElementById('select-approved-btn').addEventListener('click', function() {
        const checkboxes = document.querySelectorAll('.comment-checkbox');
        checkboxes.forEach(checkbox => {
            if (checkbox.getAttribute('data-status') === 'approved') {
                checkbox.checked = true;
            } else {
                checkbox.checked = false;
            }
        });
    });
    
    // 全选已拒绝按钮
    document.getElementById('select-rejected-btn').addEventListener('click', function() {
        const checkboxes = document.querySelectorAll('.comment-checkbox');
        checkboxes.forEach(checkbox => {
            if (checkbox.getAttribute('data-status') === 'rejected') {
                checkbox.checked = true;
            } else {
                checkbox.checked = false;
            }
        });
    });
    
    // 取消全选按钮
    document.getElementById('deselect-all-btn').addEventListener('click', function() {
        const checkboxes = document.querySelectorAll('.comment-checkbox');
        checkboxes.forEach(checkbox => {
            checkbox.checked = false;
        });
    });
    
    // 表单提交前验证
    document.getElementById('batch-action-form').addEventListener('submit', function(event) {
        const selectedComments = document.querySelectorAll('.comment-checkbox:checked');
        if (selectedComments.length === 0) {
            event.preventDefault();
            alert('请至少选择一条评论进行操作');
            return false;
        }
        
        // 根据操作类型检查选中评论的状态
        const action = event.submitter ? event.submitter.value : '';
        
        // 批准操作：检查是否包含已批准评论
        if (action === 'approve') {
            let hasApproved = false;
            selectedComments.forEach(checkbox => {
                if (checkbox.getAttribute('data-status') === 'approved') {
                    hasApproved = true;
                }
            });
            
            if (hasApproved) {
                if (!confirm('您选择了一些已批准的评论，它们将被跳过。是否继续？')) {
                    event.preventDefault();
                    return false;
                }
            }
        }
        
        // 拒绝操作：要求填写拒绝原因，并检查是否包含已拒绝评论
        if (action === 'reject') {
            const rejectedReason = document.getElementById('hidden_rejected_reason').value.trim();
            if (!rejectedReason) {
                event.preventDefault();
                alert('请提供拒绝原因');
                return false;
            }
            
            let hasRejected = false;
            selectedComments.forEach(checkbox => {
                if (checkbox.getAttribute('data-status') === 'rejected') {
                    hasRejected = true;
                }
            });
            
            if (hasRejected) {
                if (!confirm('您选择了一些已拒绝的评论，它们将被跳过。是否继续？')) {
                    event.preventDefault();
                    return false;
                }
            }
        }
        
        return true;
    });
    
    // 监听批量拒绝提交按钮
    if (document.getElementById('batch-reject-submit')) {
        document.getElementById('batch-reject-submit').addEventListener('click', function() {
            const rejectedReason = document.getElementById('batch_rejected_reason').value.trim();
            if (!rejectedReason) {
                document.getElementById('batch_rejected_reason').classList.add('is-invalid');
                return false;
            } else {
                document.getElementById('batch_rejected_reason').classList.remove('is-invalid');
                // 将拒绝原因设置到隐藏字段
                document.getElementById('hidden_rejected_reason').value = rejectedReason;
                // 添加action字段并提交表单
                const form = document.getElementById('batch-action-form');
                const actionInput = document.createElement('input');
                actionInput.type = 'hidden';
                actionInput.name = 'action';
                actionInput.value = 'reject';
                form.appendChild(actionInput);
                form.submit();
                // 提交后删除临时添加的字段
                setTimeout(() => {
                    form.removeChild(actionInput);
                }, 100);
            }
        });
    }
});
</script>
{% endblock %} 